{include file="base/_meta" /}
<style>
    #fb-editor{
        z-index: 99999;
    }
</style>
</head>
<body>


<div class="layui-fluid" style="padding: 20px;">

    <div id="fb-editor"></div>

</div>


{include file="base/_script" /}
<script src="/static/admin/js/jquery2.4.1.min.js"></script>
<script src="/static/admin/js/jquery-ui.min.js"></script>
<script src="/static/admin/js/form-builder.min.js"></script>
<script>
    layui.use(['layer', 'form','admin','notice'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , admin = layui.admin
        ,notice = layui.notice;

        jQuery(function($) {
            // 插件地址
            // https://formbuilder.online/docs/
            var fbEditor = document.getElementById('fb-editor');
            var formBuilder = $(fbEditor).formBuilder({
                // 控件显示的位置
                controlPosition: 'left',
                // 底部不显示的按钮
                disabledActionButtons: ['data','clear','save'],
                // 不显示的插件
                //https://formbuilder.online/docs/formBuilder/options/disableFields/
                disableFields: ['autocomplete','number','button','hidden','paragraph','select','starRating','file'],
                // 控件编辑不显示的内容
                // https://formbuilder.online/docs/formBuilder/options/disabledAttrs/
                disabledAttrs:['other','access','className','inline','description','placeholder','rows','step','style','toggle','value','multiple'],
                // disabledAttrs:['other','access','className','inline','description','placeholder','rows','step','style','toggle','subtype','value','multiple'],
                // 控件排序
                // https://formbuilder.online/docs/formBuilder/options/controlOrder/
                controlOrder: ['radio-group','checkbox-group','header','text', 'textarea','date'],
                // 汉语
                // https://formbuilder.online/docs/formBuilder/options/i18n/
                i18n: {
                    locale: 'zh-CN'
                },
                // 添加控件之后自动进入编辑模式
                // https://formbuilder.online/docs/formBuilder/options/editOnAdd/
                editOnAdd: false,
                // 删除警告
                // https://formbuilder.online/docs/formBuilder/options/fieldRemoveWarn/
                fieldRemoveWarn: false,
                // 自定义控件
                fields:[{
                    label: "视频上传",
                    type: "file",
                    subtype: "video",
                },{
                    label: "图片上传",
                    type: "file",
                    subtype: "image",
                },],
                // 通知
                notify: {
                    error: function(message) {
                        notice.msg(message, {icon: 2});
                        return console.error(message);
                    },
                    success: function(message) {
                        notice.msg(message, {icon: 1});
                        return console.log(message);
                    },
                    warning: function(message) {
                        notice.msg(message, {icon: 3});
                        return console.warn(message);
                    }
                },
                // 保存按钮
                onSave: function(evtevt, formData) {
                    console.log(formData)
                },
                // 监听添加
                onAddField: function(fieldId,res) {
                    const currentFieldId = fieldId;
                    // console.log(fieldId)
                },
                subtypes: {
                    file:['file','image','video'],
                },
                // 底部按钮
                actionButtons: [{
                    id: 'action-clear',
                    className: 'layui-btn layui-btn-danger',
                    label: '清空',
                    type: 'button',
                    events: {
                        click: function() {
                            layer.confirm('是否要清空全部内容', {icon: 3, title:'提示'}, function(index){
                                formBuilder.actions.clearFields();
                                layer.close(index);
                            });
                        }
                    }},{
                    id: 'action-save',
                    className: 'layui-btn',
                    label: '保存',
                    type: 'button',
                    events: {
                        click: function() {
                            var content = formBuilder.actions.getData('json', true);
                            $.post("{:url('question/saveTemp')}",{content:content,id:"{$question_id}"},function (ret) {
                                if (ret.code == 0){
                                    layer.msg(ret.msg,{icon:6,time:1500})
                                }else{
                                    layer.msg(ret.msg,{icon:5,time:1500})
                                }
                            })
                        }
                    }},
                    // {
                    // id: 'action-saveAs',
                    // className: 'layui-btn layui-btn-normal',
                    // label: '另存为',
                    // type: 'button',
                    // events: {
                    //     click: function() {
                    //         console.log(formBuilder.actions.getData('json'))
                    //     }
                    // }},
                ],
            // 默认内容
            {notempty name="$data.content"}
            defaultFields:<?php echo $data['content']?>,
            {/notempty}
            });
        });

    })
</script>
</body>
</html>
